<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout justify-center align-start row wrap>
      <v-flex xs12 md12>
        <v-btn color="green darken-1" dark @click="dialog = true">
          <span class="mx-1">添加英雄</span>
          <v-icon color="white">add</v-icon>
        </v-btn>
        <!-- <v-btn color="blue darken-1" dark>
            <span class="mx-1">保存英雄</span>
            <v-icon color="white">save</v-icon>
        </v-btn>-->
      </v-flex>
      <v-flex text-xs-center md12 xs12>
        <v-data-table :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.realName }}</td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <td class="text-xs-center subheading">{{ props.item.heroType | HeroType }}</td>
            <td class="text-xs-center subheading">{{ props.item.isFress === 1 ? '是' : '否'}}</td>
            <td class="text-xs-center">
              <!-- <v-btn flat round dark color="red darken-1" class="mx-1" @click="gotoEpigraph(props)">
                <span class="mx-1">铭文</span>
                <v-icon color="red darken-1">star</v-icon>
              </v-btn> -->
              <v-btn
                flat
                round
                dark
                color="green darken-1"
                class="mx-1"
                @click="gotoEquipment(props)"
              >
                <span class="mx-1">出装</span>
                <v-icon color="green darken-1">android</v-icon>
              </v-btn>
              <v-btn flat round dark color="blue darken-1" class="mx-1" @click="gotoSkills(props)">
                <span class="mx-1">技能</span>
                <v-icon color="blue darken-1">assignment</v-icon>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">请添加英雄数据</span>
            </div>
          </template>
        </v-data-table>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" persistent max-width="720px">
      <v-card>
        <v-card-title>
          <span class="headline">添加英雄</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="英雄名称" required v-model="editItem.realName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="英雄别称" required v-model="editItem.nickname"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md6>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>英雄头像</span>
                  <input
                    @change="headImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="equImage"
                    class="file-input"
                  >
                </v-btn>
                <span>{{headUrlName}}</span>
              </v-flex>
              <v-flex xs12 sm6 md6>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>英雄大图</span>
                  <input
                    @change="picImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="relImage"
                    class="file-input"
                  >
                </v-btn>
                <span>{{picUrlName}}</span>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select v-model="editItem.heroType" :items="heroTypeItems" label="英雄类型" required></v-select>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select v-model="editItem.isFree" :items="weekfreeItems" label="是否周免" required></v-select>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="skillDialog" persistent max-width="812px">
      <v-card>
        <v-card-title>
          <span class="headline">技能</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="技能名称" required v-model="editItem.skillName"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="技能说明" required v-model="editItem.renark"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md6>
                <v-btn color="blue" round dark flat class="white--text input-wrapper">
                  <v-icon right dark>add</v-icon>
                  <span>技能图</span>
                  <input
                    @change="headImageHandler"
                    name="files"
                    type="file"
                    accept="image/jpg;image/png"
                    ref="equImage"
                    class="file-input"
                  >
                </v-btn>
                <span>{{headUrlName}}</span>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select v-model="editItem.skillLevel" :items="skillLevelItems" label="技能等级" required></v-select>
              </v-flex>

            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" round dark flat @click="skillDialog = false">取消</v-btn>
          <v-btn color="blue darken-1" round dark flat @click="confirmDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { hero } from "../api/request";

export default {
  data: () => ({
    editItem: {},
    dialog: false,
    skillDialog: false,
    headers: [
      { text: "英雄名称", value: "lftid", align: "center", sortable: false },
      // { text: "头像", value: "headUrl", align: "center", sortable: false },
      // { text: "大图", value: "headUrl", align: "center", sortable: false },
      { text: "英雄别称", value: "headUrl", align: "center", sortable: false },
      { text: "英雄类型", value: "nickname", align: "center", sortable: false },
      { text: "是否周免", value: "nickname", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    tableData: [{
      realName: '张亮',
      nickname: '可以',
      heroType: 2,
      isFree: 1,
      headUrl: '',
      pictureUrl: ''
    }],
    heroTypeItems: [
      {
        text: "坦克",
        value: 1
      },
      {
        text: "战士",
        value: 2
      },
      {
        text: "刺客",
        value: 3
      },
      {
        text: "法师",
        value: 4
      },
      {
        text: "射手",
        value: 5
      },
      {
        text: "辅助",
        value: 6
      }
    ],
    skillLevelItems: [
      {
        text: "被动",
        value: 4
      },
      {
        text: "主升",
        value: 1
      },
      {
        text: "副升",
        value: 2
      },
      {
        text: "有大点大",
        value: 3
      }
    ],
    weekfreeItems: [
      {
        text: "是",
        value: 1
      },
      {
        text: "否",
        value: 0
      }
    ],
    headUrlName: "",
    picUrlName: "",
    skillItem : {}
  }),
  mounted() {
    this.getHeroList();
  },
  filters: {

  },
  methods: {
    gotoEpigraph(item) {
      
    },
    gotoEquipment(item) {},
    gotoSkills(item) {
      this.skillDialog = true
    },
    confirmDialog() {
      this.uploadHero();
    },
    uploadHero() {
      let form = new FormData();
      _.keys(this.editItem).forEach((key, i) => {
        form.append(key, this.editItem[key]);
      });
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };

      hero.uploadHero.r(form, config).then(({ data }) => {
        console.log(data);
        if (data.result === 0) {
          this.getHeroList();
        }

        alert(data.message);
      });
    },
    getHeroList() {
      let opt = {
        offset: 0,
        limit: 10
      };
      hero.getHeroList.r(opt).then(({ data }) => {
        this.tableData = data.data.dataList;
        console.log(data);
      });
    },
    headImageHandler(ev) {
      let file = ev.target.files[0];
      this.editItem.headUrl = file;
      this.headUrlName = file.name;
    },
    picImageHandler(ev) {
      let file = ev.target.files[0];
      this.editItem.pictureUrl = file;
      this.picUrlName = file.name;
    }
  }
};
</script>
<style lang="less" scoped>
</style>